<template>
  <div class="box">
    <el-row type="flex" justify="center" align="middle" class="wrapper">
      <el-form  status-icon  label-width="100px" class="demo-ruleForm">
        <el-form-item label="账号">
          <el-input type="text" v-model="form.username"></el-input>
        </el-form-item>
        <el-form-item label="密码" >
          <el-input type="password" v-model="form.password" ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submit" >提交</el-button>
          <el-button >重置</el-button>
        </el-form-item>
      </el-form>
    </el-row>
  </div>
</template>

<script>
export default {
  data(){
    return{
      form:{
        username:'',
        password:''
      }
    }
  },
  methods:{
    submit(){
      this.$axios({
        url:'/login',
        method:'post',
        data:this.form
      }).then(res=>{
        console.log(res);
        if(res.data.message == "登录成功"){
          localStorage.setItem('token',res.data.data.token)
          localStorage.setItem('userid',res.data.data.user.id)
          this.$message('登录成功');
          this.$router.push('/article')
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
.box{
  font-size: 16px;
  .wrapper{
    height: 100vh;

  }
}
</style>
